<template>
	  <view class="content">
	    <view class="header">
	      <image src="../../static/shilu-login/logo.png"></image>
	    </view>
	
	    <view class="list">
	      <view class="list-call">
	        <image class="img" src="/static/shilu-login/1.png"></image>
	        <input class="sl-input" v-model="phone" type="number" maxlength="11" placeholder="手机号" />
	      </view>
	      <view class="list-call">
	        <image class="img" src="/static/shilu-login/2.png"></image>
	        <input class="sl-input" v-model="password" type="text" maxlength="32" placeholder="登录密码" :password="!showPassword" />
	        <image class="img" :src="showPassword ? '/static/shilu-login/op.png' : '/static/shilu-login/cl.png'" @tap="display"></image>
	      </view>
	      <view class="list-call">
	        <image class="img" src="/static/shilu-login/3.png"></image>
	        <input class="sl-input" v-model="code" type="number" maxlength="4" placeholder="验证码" />
	        <view class="yzm" :class="{ yzms: second > 0 }" @tap="getcode">{{ yanzhengma }}</view>
	      </view>
	      <view class="list-call">
	        <image class="img" src="/static/shilu-login/4.png"></image>
	        <input class="sl-input" v-model="invitation" type="text" maxlength="12" placeholder="邀请码" />
	      </view>
	    </view>
	
	    <view class="button-login" hover-class="button-hover" @tap="bindLogin">
	      <text>注册</text>
	    </view>
	
	    <view class="agreement">
	      <image @tap="agreementSuccess" :src="agreement ? '/static/shilu-login/ty1.png' : '/static/shilu-login/ty0.png'"></image>
	      <text @tap="agreementSuccess">同意</text>
	      <navigator url="agreement?id=1" open-type="navigate">《软件用户协议》</navigator>
	    </view>
	  </view>
	
</template>



<script>
	var _this, js;
	export default {
	  onLoad() {
	    _this = this;
	  },
	  onUnload() {
	    this.clear();
	    this.second = 0;
	  },
	  data() {
	    return {
	      phone: '',
	      password: '',
	      code: '',
	      invitation: '',
	      agreement: true,
	      showPassword: false,
	      second: 0
	    };
	  },
	  computed: {
	    yanzhengma() {
	      if (this.second === 0) {
	        return '获取验证码';
	      } else {
	        if (this.second < 10) {
	          return '重新获取0' + this.second;
	        } else {
	          return '重新获取' + this.second;
	        }
	      }
	    }
	  },
	  methods: {
	    clear() {
	      clearInterval(js);
	      js = null;
	      this.second = 0;
	    },
	    display() {
	      this.showPassword = !this.showPassword;
	    },
	    agreementSuccess() {
	      this.agreement = !this.agreement;
	    },
	    getcode() {
	      if (this.phone.length !== 11) {
	        uni.showToast({
	          icon: 'none',
	          title: '手机号不正确'
	        });
	        return;
	      }
	      if (this.second > 0) {
	        return;
	      }
	      this.second = 60;
	      js = setInterval(function() {
	        _this.second--;
	        if (_this.second === 0) {
	          _this.clear();
	        }
	      }, 1000);
	      uni.request({
	        url: 'http://***/getcode.html', // 仅为示例，并非真实接口地址
	        data: {
	          phone: this.phone,
	          type: 'reg'
	        },
	        method: 'POST',
	        dataType: 'json',
	        success: (res) => {
	          if (res.data.code !== 200) {
	            uni.showToast({
	              title: res.data.msg,
	              icon: 'none'
	            });
	          } else {
	            uni.showToast({
	              title: res.data.msg
	            });
	            js = setInterval(function() {
	              _this.second--;
	              if (_this.second === 0) {
	                _this.clear();
	              }
	            }, 1000);
	          }
	        },
	        fail() {
	          this.second = 0;
	        }
	      });
	    },
	    bindLogin() {
	      if (this.agreement === false) {
	        uni.showToast({
	          icon: 'none',
	          title: '请先阅读《软件用户协议》'
	        });
	        return;
	      }
	      if (this.phone.length !== 11) {
	        uni.showToast({
	          icon: 'none',
	          title: '手机号不正确'
	        });
	        return;
	      }
	      if (this.password.length < 6) {
	        uni.showToast({
	          icon: 'none',
	          title: '密码不正确'
	        });
	        return;
	      }
	      if (this.code.length !== 4) {
	        uni.showToast({
	          icon: 'none',
	          title: '验证码不正确'
	        });
	        return;
	      }
	      uni.request({
	        url: 'http://***/reg.html',
	        data: {
	          phone: this.phone,
	          password: this.password,
	          code: this.code,
	          invitation: this.invitation
	        },
	        method: 'POST',
	        dataType: 'json',
	        success: (res) => {
	          if (res.data.code !== 200) {
	            uni.showToast({
	              title: res.data.msg,
	              icon: 'none'
	            });
	          } else {
	            uni.showToast({
	              title: res.data.msg
	            });
	            setTimeout(function() {
	              uni.navigateBack();
	            }, 1500);
	          }
	        }
	      });
	    }
	  }
	};
	
</script>



<style>
  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .header {
    width: 161rpx;
    height: 161rpx;
    background: rgba(63, 205, 235, 1);
    box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(63, 205, 235, 0.47);
    border-radius: 50%;
    margin-top: 30rpx;
    margin-left: auto;
    margin-right: auto;
  }

  .header image {
    width: 161rpx;
    height: 161rpx;
    border-radius: 50%;
  }

  .list {
    display: flex;
    flex-direction: column;
    padding-top: 50rpx;
    padding-left: 70rpx;
    padding-right: 70rpx;
  }

  .list-call {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    color: #333333;
    border-bottom: 0.5px solid #e2e2e2;
  }

  .list-call .img {
    width: 40rpx;
    height: 40rpx;
  }

  .list-call .sl-input {
    flex: 1;
    text-align: left;
    font-size: 32rpx;
    margin-left: 16rpx;
  }

  .yzm {
    color: #FF7D13;
    font-size: 24rpx;
    line-height: 64rpx;
    padding-left: 10rpx;
    padding-right: 10rpx;
    width: auto;
    height: 64rpx;
    border: 1rpx solid #FFA800;
    border-radius: 50rpx;
  }

  .yzms {
    color: #999999 !important;
    border: 1rpx solid #999999;
  }

  .button-login {
    color: #FFFFFF;
    font-size: 34rpx;
    width: 470rpx;
    height: 100rpx;
    line-height: 100rpx;
    background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
    box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
    border-radius: 50rpx;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100rpx;
  }

  .button-hover {
    background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
  }

  .agreement {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    margin-top: 80rpx;
    color: #FFA800;
    text-align: center;
    height: 40rpx;
    line-height: 40rpx;
  }

  .agreement image {
    width: 40rpx;
    height: 40rpx;
  }
</style>
